<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>学生考勤列表</title>
<c:import url="/WEB-INF/jsp/head.jsp" />
<c:import url="/WEB-INF/jsp/plugin/bootstrap-table.jsp" />
<c:import url="/WEB-INF/jsp/plugin/datetimepicker.jsp" />
<link rel="stylesheet" href="static/css/modal.css">
<c:import url="/WEB-INF/jsp/plugin/loading.jsp" />
<script type="text/javascript" src="static/js/attendance/list.js"></script>
<style type="text/css">
.form-inline .form-group {
	margin-bottom: 15px !important;
}

.option th, .option td {
	text-align: center;
}
</style>
</head>
<body>
	<div class="default-theme container-fluid iframe">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">搜索条件</div>
				<div class="panel-body">
					<form class="form-inline" action="attendance/list" method="post">
						<div class="form-group">
							<label for="id">名称：</label> <input type="text"
								style="width: 10rem" class="form-control" name="student.name"
								value="${bean.student.name }" />
						</div>
						<div class="form-group">
							<label for="id">学号：</label> <input type="text"
								class="form-control" name="student.id"
								value="${bean.student.id }" />
						</div>
						<div class="form-group">
							<label for="student.classes.name">班级：</label>
							<div class="input-group">
								<input type="text" class="form-control"
									name="student.classes.name" placeholder="点击选择班级"
									readonly="readonly" data-toggle="modal"
									value="${bean.student.classes.name }"
									data-target="#classSelect" /> <span class="input-group-btn">
									<button class="btn btn-defualt" type="button">
										<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
									</button>
								</span>
							</div>
						</div>
						<div class="form-group">
							<label for="attDate">考勤日期：</label>
							<div class="input-group">
								<input type="text" name="attDate"
									class="form-control text-center date" readonly="readonly"
									placeholder="默认当天日期"
									value="<fmt:formatDate pattern="yyyy-MM-dd" 
	            					value="${bean.attDate}" />" />
								<span class="input-group-btn">
									<button class="btn btn-defualt" type="button">
										<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
									</button>
								</span>
							</div>
						</div>
						<input type="hidden" id="pageNum" name="pageNum" />
						<div class="form-group">
							<button type="submit" class="btn btn-default" id="attSerach">搜索</button>
						</div>
						<div class="form-group">
							<button type="button" data-type="export" class="btn btn-default">
								<span class="glyphicon glyphicon-save">导出</span>
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<table class="table table-hover table-border">
				<thead>
					<tr>
						<th style="min-width: 6rem">学生编号</th>
						<th style="min-width: 6rem">学生名称</th>
						<th style="min-width: 6rem">班级名称</th>
						<th style="min-width: 8rem">上午</th>
						<th style="min-width: 8rem">下午</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:if test="${fn:length(pageInfo.list) == 0 }">
						<tr align="center">
							<td colspan="6">没有查询到数据</td>
						</tr>
					</c:if>
					<c:forEach items="${pageInfo.list }" var="item">
						<tr>
							<td>${item.student.id }</td>
							<td>${item.student.name }</td>
							<td>${item.student.classes.name }</td>
							<td>${item.amStateStr }</td>
							<td>${item.pmStateStr }</td>
							<td class="option">
								<div type="info" data-title="考勤详细"
									class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon glyphicon-list-alt"
										aria-hidden="true"> 考勤详细</span>
								</div>
								<div class="modal-mask" style="display: none; opacity: 0;">
									<div class="modal-wrapper">
										<div class="modal-container">
											<table class="table table-hover table-border">
												<thead>
													<tr>
														<th style="min-width: 6rem">签到时间</th>
														<th style="min-width: 12rem">创建时间</th>
														<th style="min-width: 6rem">备注</th>
													</tr>
												</thead>
												<tbody>
													<c:if test="${fn:length(item.records) == 0 }">
														<tr align="center">
															<td colspan="3">没有考勤记录</td>
														</tr>
													</c:if>
													<c:forEach items="${item.records }" var="att">
														<tr>
															<td><fmt:formatDate pattern="HH:mm:ss"
																	value="${att.attDate }" /></td>
															<td><fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss"
																	value="${att.createDate }" /></td>
															<td>${att.ext1 }</td>
														</tr>
													</c:forEach>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<c:import url="/WEB-INF/jsp/paging.jsp" />
		</div>
		<div class="modal fade" id="classSelect" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">选择班级</h4>
					</div>
					<div class="modal-body form-inline" style="overflow: hidden;">
						<div class="col-md-12">
							<div class="panel panel-default">
								<div class="panel-heading">搜索条件</div>
								<div class="panel-body">
									<div class="form-group">
										<label for="type.value">班级名称：</label> <input type="text"
											class="form-control" id="className" />
									</div>
									<div class="form-group">
										<label for="type.value">产品：</label> <select id="productId"
											class="form-control">
											<option value="">所有</option>
											<c:forEach items="#{products }" var="product">
												<option value="${product.id }">${product.name }</option>
											</c:forEach>
										</select>
									</div>
									<button class="selectClass btn btn-default">搜索</button>
								</div>
							</div>
						</div>
						<div class="col-md-12">
							<table id="classForm" class="table table-hover table-border"></table>
						</div>
					</div>
					<div class="modal-footer"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>